<template>
  <div>
    <el-dialog
      :title="roleInfo.isAdd ? '添加菜单' : '编辑菜单'"
      :visible.sync="roleInfo.isShow"
      :before-close="cancel"
      center
    >
      <el-form :model="roleForm" :rules="rules" ref="roleForm">
        <el-form-item
          label="角色名称"
          :label-width="formLabelWidth"
          prop="rolename"
        >
          <el-input v-model="roleForm.rolename" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色权限" :label-width="formLabelWidth">
          <!-- 树形控件 -->
          <el-tree
            :data="$store.getters['menu/getMenu']"
            show-checkbox
            default-expand-all
            node-key="id"
            ref="tree"
            highlight-current
            :props="{
              children: 'children',
              label: 'title',
            }"
          >
          </el-tree>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            v-model="roleForm.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入新增接口
import { roleadd, roleedit, roleinfo } from "../../require/api";
// //引入vuex
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      //表单内容
      roleForm: {
        rolename: "",
        status: 1,
        menus: "",
      },
      formLabelWidth: "120px",
      // 表单验证
      rules: {
        rolename: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          { min: 3, max: 7, message: "长度在 3 到 7 个字符", trigger: "blur" },
        ],
      },
      //树形子结构
      // defaultProps: {
      //   children: "children",
      //   label: "title",
      // },
    };
  },
  props: ["roleInfo"],
  mounted() {
    // 调用menu列表 优化性能 做个判断 如果已存在调用menu的数据 则不用再次调用，否则调用
    if (this.$store.getters["menu/getMenu"].length == 0) {
      this.$store.dispatch("menu/getMenuAction");
    }
  },
  computed: {
    ...mapGetters({ roleList: "role/getRole" }),
  },
  methods: {
    ...mapActions({ getRoleAction: "role/getRoleAction" }),

    // 重置操作
    reset() {
      this.roleForm = {
        rolename: "",
        status: 1,
        menus: "",
      };
      //清除内容和验证
      this.$refs.roleForm.resetFields();
      // tree 设置 node-key 属性
      this.$refs.tree.setCheckedKeys([]);
    },

    // 取消
    cancel() {
      //  清空内容
      this.reset();
      // 关闭弹窗
      this.$emit("cancel", false);
      // this.roleInfo.isShow = false;
    },
    // 修改回溯数据
    lookup(id) {
      console.log(id);
      // 请求要修改的数据一条
      roleinfo({ id }).then((res) => {
        console.log(res, "修改啊啊啊啊啊");
        if (res.code == 200) {
          this.roleForm = res.list;
          this.roleForm.id = id;
          // 将menu 数据改为数组格式
          this.roleForm.menus
            ? this.$refs.tree.setCheckedKeys(this.roleForm.menus.split(","))
            : this.$refs.tree.setCheckedKeys([]);
          console.log(this.roleForm.menus);
        }
      });
    },
    // 提交
    confirm() {
      this.$refs.roleForm.validate((val) => {
        if (val) {
          //menu 数据需要字符串格式
          this.roleForm.menus = this.$refs.tree.getCheckedKeys().join(",");
          // 判断是新增还是修改
          if (this.roleInfo.isAdd) {
            // 新增
            roleadd(this.roleForm).then((res) => {
              // console.log(res);
              if (res.code == 200) {
                // 提示成功
                this.$message.success(res.msg);
                // 关闭弹窗
                this.cancel();
                // 调用数据列表 更新页面
                this.getRoleAction();
              } else {
                // 提示信息
                this.$message.error(res.msg);
              }
            });
          } else {
            //编辑
            // 请求修改一条的接口
            roleedit(this.roleForm).then((res) => {
              // console.log("修改啊啊啊啊啊");
              console.log(res, "----");
              if (res.code == 200) {
                this.$message.success(res.msg);
                // 更新页面
                this.getRoleAction();
                // 关闭弹窗
                this.cancel();
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        }
      });
    },
  },
};
</script>
<style lang=less scoped >
</style>
